<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码生成器</title>
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="element-ui/index.js"></script>
    <link rel="stylesheet" href="element-ui/index.css"/>
    <script src="axios.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #app {

        }
        .table_name{
            font-weight: 600;
        }
        .row{
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .col{
            width: calc(90% / 4);
            margin-top: 6px;
            margin-right: 6px;
        }
        .item{
            margin-top: 8px;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="row">
        <el-card class="box-card col" v-for="item in tableList">
            <div slot="header" class="clearfix">
                <span class="table_name">{{item.tableName}}</span>
                <div>
                    <div class="item" >schema：{{item. schemaName}}</div>
                    <div class="item">字段数量：{{item. columnCount}}</div>
                    <div class="item">创建时间：{{item. createTime}}</div>
                    <div class="item">最后修改：{{item. lastModify}}</div>
                </div>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
        </el-card>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            params:{
                tableName:'USER',
                page:1,
                pageSize:10
            },
            tableList: []
        },
        mounted() {
            this.listTable();
        },
        methods: {
            listTable() {
                axios({
                    url:'http://localhost:8080/table/listTables',
                    params:this.params,
                }).then(res =>{
                    this.tableList = res.data.data;
                    console.log(res);
                })
            }
        }
    })
</script>
</html>